<template>
  <div>
    <van-cell title="商品分类" icon="shop-o">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-badge :content="5">
          <van-icon name="ellipsis" class="ellipsis" />
        </van-badge>
      </template>
    </van-cell>
    <div class="kind">
      <div>
        <!--监听切换事件-->
        <van-sidebar class="fl" v-model="activeKey" @change="selCategroy">
          <van-sidebar-item
            v-for="(cgl, index) in cateloginfos.categoryList"
            :key="index"
            :title="cgl.name"
            class="cgcenter"
          ></van-sidebar-item>
        </van-sidebar>
      </div>
      <!--二级分类区-->
      <div>
        <!-- <van-image
          :src="cateloginfos.currentCategory.picUrl"
          class="image_home"
        ></van-image>
        <div style="text-align: center">
          {{ cateloginfos.currentCategory.desc }}
        </div> -->
        <van-grid column-num="3">
          <van-grid-item
            span="8"
            v-for="(csc, index) in cateloginfos.currentSubCategory"
            :key="index"
          >
            <van-image :src="csc.picUrl" width="60%"></van-image>
            <div>{{ csc.name }}</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
//2、导入getCatalog
import { getCatalog, getCurrentCatelog } from "@/api/api";
export default {
  name: "Category",
  data() {
    return {
      value: "",
      activeKey: 0,
      cateloginfos: {
        currentCategory: {},
        currentSubCategory: {},
      },
    };
  },
  methods: {
    selCategroy(index) {
      //当前所选分类的最新数据
      getCurrentCatelog(this.cateloginfos.categoryList[index].id).then(resp => {
          console.log(resp.data.data);
          let current = resp.data.data;
          this.cateloginfos.currentCategory = current.currentCategory;
          this.cateloginfos.currentSubCategory = current.currentSubCategory;
        }
      );
    },
  },
  //1、生命周期钩子(方法、函数)
  created() {
    console.log("数据初始化之后——异步请求");
    //3、ES6  Promise
    getCatalog().then((resp) => {
      // console.log(resp);
      //获得homeinfos数据
      this.cateloginfos = resp.data.data;
      //输出
      console.log(this.cateloginfos);
    });
  },
};
</script>

<style scoped>
.kind {
  display: flex;
}
.cgcenter {
  display: block;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #f2f2f2;
  line-height: 0px;
}
.image_home {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</style>
